<template>
	<div v-if="role > 1">
		<div class="chain-link-bar-wrapper">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>子账号</el-breadcrumb-item>
				<el-breadcrumb-item to="/member">子账号管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>

		<el-card class="box-card">
			<div slot="header" class="clearfix"><span>账号列表</span></div>

			<div class="app-diliver-15"></div>
			<div class="app-diliver-10"></div>
			
			<div class="clearfix app-tabs-wrapper color-black-third">
				 <el-button type="success" @click="checkStatusHandle()" round>添加账号</el-button>
			</div>
			
			<div class="app-diliver-15"></div>
			<div class="app-diliver-15"></div>

			<el-table :data="accountList" stripe border style="width: 100%" class="nc-table-btn-ctrl">
				<el-table-column type="index"></el-table-column>


				<el-table-column prop="id" label="用户id"></el-table-column>
				<el-table-column prop="account" label="账号"></el-table-column>
				<el-table-column label="账号权限" prop="role">
					<template slot-scope="scope">
						<span v-if="scope.row.role === 1">一星客服</span>
						<span v-if="scope.row.role === 2">二星客服</span>
						<span v-if="scope.row.role === 3">三星客服</span>
						<span v-if="scope.row.role === 10">认证客服</span>
						<span v-if="scope.row.role === 100">总客服</span>
					</template>
				</el-table-column>
				<el-table-column prop="address" label="地区"></el-table-column>
				<el-table-column prop="user" label="使用者"></el-table-column>
				

				<el-table-column label="操作">
					<template slot-scope="scope">

						<NcButton
							v-if="scope.row.isDel == 0"
							size="mini"
							type="danger"
							:post-option="{
								url: setDeleteUrl,
								callback: getPage,
								confirm: '确定要停用客服【' + scope.row.account + '】的账号吗？',
								data: { id: scope.row.userId,role:scope.row.role }
							}"
							class="app-margin-l-10 app-margin-v-5"
						>
							停用
						</NcButton>
						
						<NcButton
							v-if="scope.row.isDel == 1"
							size="mini"
							type="success"
							:post-option="{
								url: setRecoverUrl,
								callback: getPage,
								confirm: '确定要恢复客服【' + scope.row.account + '】的账号吗？',
								data: { id: scope.row.userId,role:scope.row.role }
							}"
							class="app-margin-l-10 app-margin-v-5"
						>
							恢复
						</NcButton>
						
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		
		<AddAccount :is-show="checkStatusEditVisible" ></AddAccount>

	</div>
</template>

<script>
import NcButton from '../common/NcButton';
import SubmitButton from '../common/SubmitButton';

import AddAccount from './AddAccount';

import AccountApi from '../../api/AccountApi';

//需要导入vuex的数据管理
import Store from '../../store/index.js'

export default {
	components: {
		NcButton,
		SubmitButton,
		AddAccount
	},
	data() {
		return {
			visible: false,
			accountList:[],
			a:{
				
			},
			setDeleteUrl: AccountApi.URL_ACCOUNT_DELETE,
			setRecoverUrl: AccountApi.URL_ACCOUNT_RECOVER,
			
			
			role:'',
			checkStatusEditVisible:false,
			editProcurement:[],
			checkYes:0
		};
	},
	computed: {
	},
	created() {
		this.getPage();
		this.role = Store.state.user.role;
		this.$root.eventHub.$on('closeEditDialog', this.hideEditDialog);
	},
	beforeDestroy: function() {
		this.$root.eventHub.$off('closeEditDialog', this.hideEditDialog);
	},
	mounted() {
	},
	methods: {
		getPage() {
			AccountApi.list(this.a, json => {
				this.accountList = json.list;
				console.log(this.accountList)
			});
		},
		checkStatusHandle(procurementId, checkYes) {
			this.checkStatusEditVisible = true;
		},
		hideEditDialog(isSuccess) {
			this.checkStatusEditVisible = false;
			this.editProcurement = {};
		
			if (isSuccess) {
				this.getPage();
			}
		}
	}
};
</script>
